<template>
    <el-row v-for="item in dish" >
        <el-col :span="5">
            <div style="display: flex; align-items: center; width:120px;height:120px">
                <el-avatar shape="square" :size="100" :src="item.image" class="avatar" />
            </div>
        </el-col>
        <el-col :span="14">
            <div style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 30px; font-weight: bold; color: #333;">
                {{item.name}}
            </div>
            <div style="display: flex; align-items: center;">
                <span style="margin-left: 5px;">月售{{item.salesVolume}}份</span>
            </div>
            <div style="display: flex; align-items: center;">
                <el-avatar shape="square" :size="22" src="../../public/img/rmb.png" class="avatar"></el-avatar>
                <span style="margin-left: 5px;">{{item.price}}</span>
            </div>
            <div style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12px; color: #666; text-align: justify;margin-right: 5px;">
                {{item.description}}
            </div>
        </el-col>
        <el-col :span="5" style="display: flex; align-items: center;">
            <el-button :plain="true" style="margin-left: 10px;" type="success" @click="toOrder(item.id,item.name,item.price)">我要点这个</el-button>
        </el-col>
        <br>
        <br>
    </el-row>

</template>

<script setup>
    import {ref,onMounted,reactive,computed} from 'vue'
    import {
        Document, Menu as IconMenu, Location, Setting, Bowl, ShoppingCartFull, Tickets,ArrowLeft
    } from '@element-plus/icons-vue'
    import {useRoute,useRouter} from 'vue-router'
    import {addToShoppingCart, getDish, getDishDetail, selectAllCart, updateShoppingCart} from "../../api/merchant";
    import state from "../../store";
    import store from "../../store";
    import { ElMessage } from 'element-plus'


    const dish=ref([])
    /* 执行useRoute 函数 生成一个对象 */
    const route = useRoute();
    const router = useRouter()
    //食物数组
    const Foods=ref([])
    //食物对象
    const food=ref({})

    const loading = ref(true)

    //初始化
    const myInit= async (id)=>{
        const {data} = await getDish({id,merchantId:merchantId.value})
        for(let i=0;i<data.length;i++){
            dish.value.push(data[i])
        }
        loading.value=false
    }

    router.beforeEach((to,from)=>{
        if(to.name!=from.name){
            //menu到index报错修复
            if(to.name!="merchantmenu"){
                return
            }
        }
        //跳转到其他menu时执行
        if(to!=from){
            dish.value=[]
            myInit(to.params.id)
        }

    })

    onMounted(()=>{
        myInit(route.params.id)
    })

    /*
    * 路由守卫
    * 场景：组件只显示值，而不更新值。当要向组件中传入参数时，url发生改变，但组件内容不变，需要使用路由守卫
    * 钩子函数只会在初始化时执行一次，当再次跳转到该组件时，不再执行
    * 路由守卫会拦截url，在拦截之前做什么，在拦截之后做什么，只会重新渲染页面，不再执行钩子函数
    * */

    const userId = computed(() => {
        return store.getters.getId
    })

    const merchantId = computed(() => {
        return store.getters.getMerchantId
    })


    //点击"我要选这个"后先判断购物车是否有该物品，没有则添加，否则增加数量
    const toOrder=(id,name,price)=>{
        let nowIndex=-1
        let flag=0;
        Foods.value.forEach(food=>{
            nowIndex++
            if(food["id"]==id){
                //购物车有这个菜品
                flag++
                food["number"]++
                const cart={increment:1,id:food["cartId"]};
                updateShoppingCart(cart)
            }
        })
        //购物车没有该菜品
        if(flag==0){
            food.value={id,name,price,number:1}
            const createTime=new Date().format("yyyy-MM-dd hh:mm:ss");
            const updateTime=new Date().format("yyyy-MM-dd hh:mm:ss");
            //添加到数据库中
            addToShoppingCart({userId:userId.value,dishId:id,number:1,merchantId:merchantId.value,updateTime,createTime}).then(res=>{
                //给对象动态赋值
                food.value.cartId=res.data
            })
            Foods.value.push(food.value)
        }

        //弹出成功信息
        ElMessage({
            message: '添加菜品成功！',
            type: 'success',
        })
    }
</script>
<style scoped>

</style>
